{% extends 'index.html' %}

{% block head %}
<style type="text/css">
    .display_none{display: none;}
</style>

{% endblock %}

{% block bodyweigh %}
<body style="width: 2200px; background-size: 2200px 200%;">
{% endblock %}

{% block content %}

    <!-- 右侧主体开始 -->
        <div class="page-content" >
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <label class="layui-form-label xbs768">日期范围</label>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username"  id="name"  placeholder="请输入游戏名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <div class="layui-btn"  id="search"><i class="layui-icon">&#xe615;</i></div>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><button class="layui-btn" onclick="member_add('添加游戏','/app/show/add_game','600','500')"><i class="layui-icon">&#xe608;</i>添加</button><span class="x-right" style="line-height:40px" id="counts"></span></xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            ID
                        </th>
                        <th>
                            游戏名称
                        </th>
                        <th>
                            创建时间
                        </th>
                        <th>
                            游戏icon
                        </th>
                        <th>
                            游戏banner
                        </th>
                        <th>
                            游戏下载地址
                        </th>
                        <th>
                            游戏贴吧地址
                        </th>  
                        <th>
                            游戏优先级
                        </th>                   
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody id="game">
                   
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
        <div id="number" class="display_none"><select id="num"></select></div>
{% endblock %}

{% block script %}
 <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //
          

          
          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };
          
          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };
          
          document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
          }
          document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
          }
          
        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }



        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h); 
        }

        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
        </script>

        
        <script>
            
            for (var i=1;i<100;i++)
                {
                    $("#num").append('<option style="color: #000;" value ="'+i+'">'+i+'</option>');
                }

            $("#counts").html("共有数据：{{ data|count }} 条")

            {% for i in data %}

            $("#game").append(

                    '<tr>'+
                        '<td>'+
                            '<input type="checkbox" value="{{loop.index}}" name="">'+
                        '</td>'+
                        '<td>'+
                            '{{loop.index}}'+
                        '</td>'+
                        '<td>'+
                            '<input style="color: #000;" type="text" class="title" value="{{ i.game_name }}">'+
                        '</td>'+
                        '<td>'+
                            '{{ i.create_time }}'+
                        '</td>'+
                        '<td>'+                      
                            '<img style="width:50px;height:50px" src="{{ i.icon }}" >&emsp;&emsp;<input type="file" class="image" accept="image/*"/><input type="hidden" class="imgurl" value=""/><input type="hidden" class="is_change" value="0"/>'+
                        '</td>'+
                        '<td>'+                      
                            '<img style="width:50px;height:50px" src="{{ i.banner }}" >&emsp;&emsp;<input type="file" class="banner" accept="image/*"/><input type="hidden" class="bannerurl" value=""/><input type="hidden" class="is_change2" value="0"/>'+
                        '</td>'+
                        '<td>'+                      
                            '<input type="text" style="color: #000;" class="load_url" value="{{ i.game_load_url }}">'+
                        '</td>'+                        
                        '<td>'+    
                            '<input type="text" style="color: #000;" class="tieba_url" value="{{ i.tieba_url }}">'+
                        '</td>'+                        
                        '<td>'+    
                            '<select style="color: #000;" id="num_select{{loop.index}}">'+$("#num").html()+'</select><input type="hidden" class="num_select" value="{{ i.priority }}"/>'+
                        '</td>'+
                        '<td class="td-manage">'+
                            '<button type="button" style="color: #000;" class="modify">保存</button>  &emsp;'+
                            '<button type="button" style="color: #000;" class="delete">删除</button>'+
                        '</td>'+
                        '<input type="hidden" class="id" value="{{ i.id }}"  />'+
                    '</tr>')

                    $("#num_select{{loop.index}} option[value='{{i.priority}}']").attr("selected","selected");
                
                    $("#num_select{{loop.index}}").on("click",function(){
                        var num = $("#num_select{{loop.index}} option:selected").val();
                        $(this).next().val(num);
                    });

                {% endfor %}

        </script>

        <script>


                $(".image").change(function(){
                    var imageurl = $(this).next();
                    var file = this.files[0];
                    if (window.FileReader) {
                            var reader = new FileReader();
                            reader.readAsDataURL(file);
                            //监听文件读取结束后事件
                          reader.onloadend = function (e) {
                            imageurl.val(e.target.result);    //e.target.result就是最后的路径地址
                              imageurl.next().val(1);
                            };
                       }
                });

                $(".banner").change(function(){
                    var imageurl = $(this).next();
                    var file = this.files[0];
                    if (window.FileReader) {
                            var reader = new FileReader();
                            reader.readAsDataURL(file);
                            //监听文件读取结束后事件
                          reader.onloadend = function (e) {
                            imageurl.val(e.target.result);    //e.target.result就是最后的路径地址
                              imageurl.next().val(1);
                            };
                       }
                });
        
            $(".modify").on("click",function() {
                var id = $(this).parent().parent().find(".id").val();
                var title = $(this).parent().parent().find(".title").val(); 
                var image = $(this).parent().parent().find(".imgurl").val();
                var banner = $(this).parent().parent().find(".bannerurl").val();
                var is_change = $(this).parent().parent().find(".is_change").val();
                var is_change2 = $(this).parent().parent().find(".is_change2").val();
                var load_url = $(this).parent().parent().find(".load_url").val();
                var tieba_url = $(this).parent().parent().find(".tieba_url").val();   
                var priority = $(this).parent().parent().find(".num_select").val();     
              
                params = {
                    "id":id,
                    "title":title,            
                    "icon":image,
                    "is_change":is_change,
                    "is_change2":is_change2,
                    "load_url":load_url,
                    "tieba_url":tieba_url,
                    "banner":banner,
                    "priority":priority,
               };

               $.ajax({
                    url:"/app/game/modify",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/game";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
            });
        
            $(".delete").on("click",function(){
                var id = $(this).parent().parent().find(".id").val();
                params = {"id":id};
                $.ajax({
                    url:"/app/game/delete",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/game";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
            });

            $("#search").on("click",function(){

                var name = $("#name").val();

                if ( name == "" ) {
                    location.href="/app/show/game";
                }else{

                    location.href="/app/show/game?name="+name;
                }
            });


        </script>>
{% endblock %}